/**-----------------------------轮播区-------------------------------*/
const swiperEle = document.querySelector('.swiper-wrapper')
const foodEle = document.querySelector('.food-list')
function onSwiper() {
    var mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项
        autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}

/*----------------------------------API-----------------------------*/
function onApi() {
    // 轮播区
    ajaxPromise({
        method: 'get',
        url: 'http://localhost:8088/api/shop/banner'
    }).then(data => {
        let banner = data.resultInfo.list
        showBaner(banner)
    }).catch(error => {
        console.log('轮播区网络请求出错')
    })
    // 首页商品列表
    ajaxPromise({
        method: 'get',
        url: 'http://localhost:8088/api/shop/list'
    }).then(data => {
        let list = data.resultInfo.list
        onFood(list)
    }).catch(error => {
        console.log('商品列表区网络请求出错')
    })

}

/*****-------------------------数据渲染区--------------------------*****/
// 轮播区
function showBaner(bannerList) {
    let str = bannerList.map(item => {
        return `
                <div class="swiper-slide">
                    <img src="${item.url}" alt="">
                </div>
               `
    }).join('')
    swiperEle.innerHTML = str
    onSwiper()
}

// 首页商品列表
function onFood(productList) {
    let listArr = productList.map(item => {
        return `
                <li onclick="onDetail(${item.id})">
                    <img src="${item.picture}" alt="图片">
                    <a href="javascript:;">${item.categoryname}</a>
                    <span>￥${item.price}</span>
                </li>
               `
    }).join('')
    foodEle.innerHTML = listArr
}

/**-------------------------------详情id----------------------------**/
function onDetail(id) {
    location.href = 'detail.html?id=' + id
}


onApi()


